<template>
  <div style="height: 100%">
    <div class="all" style="height: 100%">
      <div v-for="img in imgs[0]" :key="img.text" style="padding-top: 10px">
        <v-card class="mx-auto" max-width="344">
          <el-image
            style="width: 100%; height: 200px"
            :src="img.imgUrl"
            :preview-src-list="srcList"
            lazy
          >
          </el-image>
          <v-card-title western> {{ img.imgTitle }} </v-card-title>
          <v-card-subtitle>{{ img.imgRemarks }} </v-card-subtitle>
        </v-card>
      </div>
    </div>
  </div>
</template>
<script>
import { request } from "../../network/request";
export default {
  name: "BlogCasualPhoto",
  data() {
    return {
      // 图片展示src
      imgs: [],
      // 变大列表src
      srcList: [],
    };
  },
  created() {
    request({
      url: "/admin/getimgpage",
      method: "GET",
    })
      .then((res) => {
        this.imgs.push(eval(res.data.msg));
        var i = 0;
        for (; i < this.imgs[0].length; i++) {
          this.srcList.push(this.imgs[0][i].imgUrl);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
<style lang="scss" scoped>
.all {
  display: flex;
  height: 100%;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>